<template>
    <div>
        <div class="header">
        <div class="left-box iconfont icon-gengduo" @click="gotomy"></div>
        <div class="center">MUSIC HUA</div>
        <div class="right iconfont icon-sousuo2" @click="gotoSearch"></div>
      </div>
      <div class="nav">
        <router-link to="/recommend" class="item">推荐</router-link>
        <router-link to="/ranking" class="item">排行</router-link>
        <router-link to="/singer" class="item">歌手</router-link>
        <router-link to="/mv" class="item">MV</router-link>
      </div>
    </div>
</template>

<script>
    export default {
        methods: {
          gotoSearch(){
          this.$router.push('/search')
          },
          gotomy(){
          this.$router.push('/my')
          }
        },
    }
</script>

<style lang="less">
.header{
  min-width: 320px;
  max-width: 750px;
  height: 40px;
  display: flex;
  background-color: #d43c33;
  text-align: center;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1000;
  .left-box,.right{
    flex:0 0 40px;
    line-height: 40px;
  }
  .center{
    flex: 1;
    line-height: 40px;
  }
}
.nav{
  min-width: 320px;
  max-width: 750px;
  height: 40px;
  background-color: #d43c33;
  display: flex;
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;

  .item{
    padding: 2px 0;
    color: white;
    font-size: 14px;
    border-bottom: 2px solid transparent;
  }
  .router-link-active{
    border-color: white;
  }
}
</style>